<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<style type="text/css">
	body {
	background: url(/gameforum/static/pic/body_bg.jpg);
	min-height:700px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
	a {
		color: #08C;
		text-decoration: none;
	}
	.btn {
		display: inline-block;
		padding: 4px 10px 4px;
		font-size: 13px;
		line-height: 18px;
		color: #333;
		text-align: center;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
		background-color: #FAFAFA;
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
		background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
		background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
		background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
		background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
		background-image: linear-gradient(white, white 25%, #E6E6E6);
		background-repeat: no-repeat;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
		border: 1px solid #CCC;
		border-bottom-color: #BBB;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
		cursor: pointer;
	}
	.btn-success {
		background-color: #5BB75B;
		background-image: -moz-linear-gradient(top, #62C462, #51A351);
		background-image: -ms-linear-gradient(top, #62C462, #51A351);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62C462), to(#51A351));
		background-image: -webkit-linear-gradient(top, #62C462, #51A351);
		background-image: -o-linear-gradient(top, #62C462, #51A351);
		background-image: linear-gradient(top, #62C462, #51A351);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
		border-color: #51A351 #51A351 #387038;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	}
	button, input[type="button"], input[type="reset"], input[type="submit"] {
		cursor: pointer;
		-webkit-appearance: button;
	}
	input[type="button"], input[type="reset"], input[type="submit"] {
		width: auto;
		height: auto;
	}
	.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover {
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		color: white;
	}	
</style>
<title>修改头像</title>
<script type="text/javascript" src="static/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="static/css/jquery.Jcrop.css" type="text/css">
	<script type="text/javascript">
		$(document).ready(function(){
			  var state = 0;
		      var jcrop_api, boundx, boundy;
		      $('#target').Jcrop({
		        onChange: updatePreview,
		        onSelect: updatePreview,
		        onRelease:  clearCoords,
		        aspectRatio: 1
		      },function(){
		        var bounds = this.getBounds();
		        boundx = bounds[0];
		        boundy = bounds[1];
		        jcrop_api = this;
		      });
	
		      function updatePreview(c)
		      {
		    	  state = 1;
		    	  $('#x1').val(c.x);
			      $('#y1').val(c.y);
			      $('#x2').val(c.x2);
			      $('#y2').val(c.y2);
			      $('#w').val(c.w);
			      $('#h').val(c.h);
				  if (parseInt(c.w) > 0)
				  {
				    var rx = 100 / c.w;
				    var ry = 100 / c.h;
				
				    $('#preview').css({
				      width: Math.round(rx * boundx) + 'px',
				      height: Math.round(ry * boundy) + 'px',
				      marginLeft: '-' + Math.round(rx * c.x) + 'px',
				      marginTop: '-' + Math.round(ry * c.y) + 'px'
				    });
				  }
				};
			    function clearCoords()
			    {
			     state = 0;
			      $('#coords input').val('');
			      $('#h').css({color:'red'});
			      window.setTimeout(function(){
			        $('#h').css({color:'inherit'});
			      },500);
			    };
			    $("#save").click(function(){
			    	if(state == 0) {
			    		alert("请剪裁头像");
			    		return false;
			    	} else {
			    		$("#height").val($("#target").height());
			    		return true;
			    	}
			    });
	 	});
	</script>
</head>
<body style="font-size:15px;">
		<div style="text-align: center;">
			<a href="index.jsp">
				<img alt="论坛Logo" height="43" src="static/pic/logo.jpg" width="192">
			</a>
		</div>
		<table width="100%">
			<tr>
				<td>
					<a href="index.jsp">
						返回首页
					</a>
			</td>
			<td style="text-align: right;">
					<%@ include file="/static/htm/user.jsp"%>
				</td>
			</tr>
		</table>
		<div style="position:relative;width:50%;left:25%;border: solid 1px #0B85FF;min-height:300px;">
			<%
				if(Tools.savePicture(pageContext, request)) {
			%>
				<form action="permit/docut" method="post">
					<table width="100%">
						<tr>
							<td>
								<img alt="avatar" src="static/pic/users/${filename}" id="target" style="max-height: 500px;max-width:500px;">
							</td>
							<td>
								<div style="width:100px;height:100px;overflow:hidden;">
									<img src="static/pic/users/${filename}" id="preview" alt="Preview" />
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input id="save" type="submit" value="剪裁并保存" class="btn btn-success">
							</td>
						</tr>
					</table>
					<input type="hidden" size="4" id="x1" name="x1" />
					<input type="hidden" size="4" id="y1" name="y1" />
					<input type="hidden" size="4" id="x2" name="x2" />
					<input type="hidden" size="4" id="y2" name="y2" />
					<input type="hidden" size="4" id="w" name="w" />
					<input type="hidden" size="4" id="h" name="h" />
					<input type="hidden" name="ext" value="${ext}" />
					<input type="hidden" name="height" value="" id="height"/>
				</form>
			<%
				} else {
					out.println("上传头像失败,请重新上传");
				}
			%>
		</div>
</body>
</html>